<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#grid {
			width: 100vw;
			height: 100vh;
			display: grid;
			border:solid 1px  #2fe ;
			
			grid-template-rows: 10% 80% 10%;    
			grid-template-columns: 20% 80%;       
			grid-template-areas: "header header" "nav main" "footer footer";
			
		   //grid不好设置啊(下面多了div标签)
		   //不显示的原因是什么? 注释位置会影响grid布局
			/* grid-gap:2px; */
		}
		header, nav, main, footer{
			background-color: #4d8;
			background-clip: content-box;
			padding: 5px;
		}
		
         header {
			 grid-area: header;
		 }
		 
		 nav {
			 grid-area: nav;
		 }
		 
		 main {
			 grid-area:main;
			 display: grid;
			 grid-template-columns: repeat(3,1fr);
			 grid-template-rows: repeat(3, 1fr);
			 grid-auto-flow: row dense;    //important
			 
		 }
		 main div {
			 background-color: #9f3;
			 background-clip: content-box;
			 padding: 4px;
			 text-align: center;   //text center?
			 
		 }
		 main div:nth-child(1){
			 grid-column: 1/span 2;
			 
		 }
		 main div:nth-child(2){
			 grid-column: 2/span 1;
		 			 
		 }
		 main div:nth-child(3){
		 			 
		 }
		 main div:nth-child(4){
		 			 
		 }
		 
		 
		 footer {
			 grid-area: footer;
			 display: grid;
			 grid-template-columns: repeat(4, 30px);
			 background-color: #6d6;
			 justify-content: space-evenly;
			 align-content: center;
		}
			 
		 footer div {
            width: 10vw;
			height: 5vh;
			background-color: #d48;
			background-clip: content-box;
			padding: 3px;
		 }
	</style>
	<body>
		<div id="grid">
			<header class="mui-bar mui-bar-nav"></header>
			<nav></nav>
			<main>
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
			</main>
			<footer>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</footer>
		</div>
	</body>
</html>
